iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 18
2
Modern Web

重新認識 Flex 和 Grid系列 第 18

[Day18] Grid 網格容器

  • 分享至 

  • xImage
  •  
.container {
    display: grid | inline-grid;
}

當我們對 container 宣告 display: gridinline-grid 時,container 便會成為網格容器,而其子層 item 會成為網格項目,接下來我們會針對網格容器的部分做介紹


網格容器之屬性值 grid 和 inline-grid 的差別

差別上就如同 flexbox 中的 flex 和 inline-flex,不過因為項目的排列方式不同,會造成不一樣的容器外觀。

display: grid;

https://ithelp.ithome.com.tw/upload/images/20201003/20128346C0i8zNaFib.png

當在 display 屬性宣告 grid,如果沒有設定寬高,可以看到網格容器像 block 一樣佔據了整行。

https://ithelp.ithome.com.tw/upload/images/20201003/20128346MbbuHYjaJ6.png

如果出現第二個彈性容器,它就會像 block 把第二個網格容器移到下一行。


display: inline-grid;

https://ithelp.ithome.com.tw/upload/images/20201003/20128346ChRUb2Hjnj.png

當在 display 屬性宣告 inline-grid,如果沒有設定寬高,可以看到網格容器像 inline-block 一樣被子層網格項目的尺寸撐開。

https://ithelp.ithome.com.tw/upload/images/20201003/201283467YBWX14cTh.png
(有設定容器尺寸)

https://ithelp.ithome.com.tw/upload/images/20201003/20128346hBZI2auCyy.png
(沒設定容器尺寸)

如果出現第二個網格容器,它就會像 inline-block 和第二個網格容器併排,而且網格容器也可以像 inline-block 一樣有調整尺寸的特性,甚至也有繼承那個奇怪空隙的特性(我並沒有在兩個網格容器之間加上間距)。

https://ithelp.ithome.com.tw/upload/images/20201003/20128346tzVhgDHild.png

如果你將畫面縮小的話,網格容器會因為 "畫面寬度" < "所有網格容器的總寬度" 而自動換行,所以會看起來像是有換行的 block,但這其實是 inline-block 的特性。


很像 block / inline-block,但仍舊是網格容器

就如同 flexbox 一樣,雖然很像 block/inline-block,但仍然是網格容器,其中和一般 block 的差別也幾乎和 flexbox 一樣。W3C grid-containers

  1. float 和 clear 無法使用於彈性容器內
  2. vertical-align 對彈性項目沒有效果(但對彈性項目裡面的內容還是有用的)
  3. 偽元素 ::first-line 和 ::first-letter 無法使用於彈性容器本身
  4. 不適用所有的 column 屬性

網格環境

相信你已經對建立網格容器有些概念,然而網格容器內的格式化環境還有許多元素,之後也會相繼提到:

https://ithelp.ithome.com.tw/upload/images/20201003/20128346LQ4Rlz16e3.png

  • 網格線:網格裡面的線(在 devtool 上顯示虛線),制定網格內容的範圍,構成所有網格元件的重要元素。

  • 網格軌道:網格容器的某幾行(網格行)或列(網格列)。

  • 網格單元格:由四條網格線或邊緣組成的最小封閉區域,中間沒有任額的網格線穿過,也就是最小的區域單位。

  • 網格區域:由四條自定義的網格線或邊緣組成的某個封閉區域。

結論

從以上可以看出 flexbox 和 grid 容器的建立概念,可以說幾乎是同個模子刻出來的,不過在容器內的使用方式卻有許多不同。接下來幾篇會介紹網格容器的相關屬性。


資料來源:


上一篇
[Day17] Grid 基本認識
下一篇
[Day19] grid-template 屬性之 rows/columns
系列文
重新認識 Flex 和 Grid30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言